<template>
	<view>
		<view :class="type?'edit-item':'look-item'">
			<view class="flex align-center">
				<view class="title">手机号</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="phone" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="edit-btn" style="margin-top: 50rpx;" @click="upDataInfo">立即绑定</view>
	</view>
</template>

<script>
	import { postBindPhone, getUserInfo } from "../../api/user.js"
	export default {
		data() {
			return {
				type: true,
				phone: ''
			}
		},
		methods: {
			// 绑定手机号
			async upDataInfo() {
				var data = new Object();
				data.phone = this.phone;
				let reg = /^1[3|4|5|7|8]\d{9}$/;
				if(!reg.test(data.phone)) {
					uni.showToast({
						title: "手机号输入有误",
						icon: "none"
					})
				}
				data.token = uni.getStorageSync('token');
				
				let res = await postBindPhone(data);
				if(res.data.code == 1){
					var user = await getUserInfo({uid: uni.getStorageSync('uid')})
					if(user.data.code == 1) {
						uni.setStorageSync('userInfo',user.data.data)
						uni.showToast({
							title: "绑定成功",
							icon: "success",
							success() {
								setTimeout(()=>uni.navigateBack(),2000)
							}
						})
					} else {
						uni.showToast({
							title: user.data.msg,
							icon: "none"
						})
					}
					
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}
	
	.img-box .clear-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}
	
	.clzp-box>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

	/* .clzp-box>view :nth-child(2n+n) {
		margin-right: 0 !important;
	} */

	.head_url {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.histry {
		background-color: transparent;
		text-align: right;
		font-size: 28rpx;
		margin-right: 30rpx;
		color: #0000EE;
	}
</style>
